<template>
  <div>
    <img :src="require('@/assets/index-banner.png')" alt="" class="about-banner">
    <div class="about-view flex-sp">
      <div class="about—left">
        <p class="title-line">联系我们</p>
        <p class="name-line">人人佰服信息技术(成都)有限公司</p>
        <p class="info-line">
          地址：四川省成都市高新区天府三街 <br>
          联系电话：028-85054666<br>
          微信号：19828933515<br>
          QQ客服：965676271 1725967392<br>
        </p>
      </div>
      <div class="about—right">
        <p class="title-line">公司简介</p>
        <p class="info-line">人人佰服信息技术(成都)有限公司总部位于四川成都市高新区天府三街新希望大厦，产品解决找人、找车、找房、找司机和汽车大数据五大业务板块的互联网企业，为网友提供系统化的劳动用工对接方案；公司以人人佰服APP平台为基础，通过服务者和网友双方的手机距离进行匹配，为网友提供家政、律师、维修、装修、车业服务等专业人才的推送，让用户快速找到适合需要的技术人才；同时为国内的运营车辆提供就近的出租信息对接、找房模块以住房和办公室出租为场景，为广大网友提供优质的房源出租对接、找司机模块是专门为司机朋友打造的司机招聘信息发布平台，为国内司机提供求职解决方案、司机招聘信息对外免费发布，人人佰服APP还具有汽车大数据查询功能，为汽车行业提供合法的各种汽车数据查询业务。</p>
        <div class="img-list">
          <img :src="require(`@/assets/b1 (${i + 1}).png`)" alt="" v-for="(v, i) in imgList" :key="i">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      imgList: [
        {
        },
        {
        },
        {
        },
        {
        }
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .about-banner {
    width: 100%;
  }

  .about-view {
    width: 1200px;
    margin: auto;
    background: #fff;
    .about—left {
      width: 310px;
    }
    .about—right {
      width: 890px;
    }
    .title-line {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 50px;
      &::before {
        content: ' ';
        display: inline-block;
        width: 4px;
        height: 20px;
        background: #005599;
        opacity: 1;
        margin-right: 16px;
      }
    }
    .name-line {
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      line-height: 50px;
      color: #005599;
      margin-bottom: 30px;
      padding: 0 20px;
    }
    .info-line{
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      line-height: 36px;
      color: #333333;
      padding: 0 20px;
    }
    .img-list {
      width: 820px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      flex-wrap: wrap;
      img {
        width: 400px;
        height: 300px;
        margin-bottom: 20px;
      }
    }
  }
</style>
